﻿
@{
    ViewBag.Title = "我的评论";
    Layout = "~/Views/Shared/_UserLayout.cshtml";
}
@section Head{
    <link href="~/common/css/Orders.css" rel="stylesheet" type="text/css" />
    <link href="~/common/Threelinkage/layui/css/layui.css" rel="stylesheet" type="text/css" />
}

<div class="user_style clearfix" id="user">
    <div class="user_title"><em></em>用户中心</div>
    <div class="clearfix user">
        <!--左侧菜单栏样式-->
        @Html.Partial("~/Views/Shared/_PartialUserLeft.cshtml")
        <!--右侧内容样式-->
        <div class=" right_style=right_style r_user_style=r_user_style user_right" =user_right">
            <div class="user_Borders clearfix">
                <div class="title_name">
                    <span class="name">用户评论</span>
                </div>
                <!--收藏样式-->
                <div class="Collect">
                    <fieldset>
                        <!--产品列表-->
                        <div class="Product_List">
                            <table>
                                <thead>
                                    <tr class="title">
                                        <td colspan="4">我的评价</td>
                                    </tr>
                                    <tr class="title" style="background-color:#f2f2f2;">
                                        <td>评论图片</td>
                                        <td>评论内容</td>
                                        <td>评论等级</td>
                                        <td>查看商品</td>
                                    </tr>
                                </thead>

                                <tbody class="comment_content">
                                    @*<tr>
                                            <td colspan="3" style="text-align:left;font-size:18px;">没有填写评价!</td>
                                        </tr>*@

                                </tbody>

                            </table>


                        </div>
                    </fieldset>

                    <!--分页-->

                    <div id="page" class="page"></div>

                </div>
            </div>
        </div>
    </div>
</div>

@section FooterScript{
    <script src="~/common/js/template-2.js"></script>
    <script src="~/common/Threelinkage/layui/layui.all.js"></script>

    <script id="comment_template" type="text/html">
        {{each data as item}}
        <tr>
            <td style="width:150px">
                <a href="javascript:void();">
                    <img src="http://static.amortal.top/{{ item.commentImgSrc }}?imageView2/2/w/200/h/200/interlace/1/q/100" width="100px" height="100px" />
                </a>
            </td>
            <td style="text-align:left; width:420px;" title="{{item.content}}">
                {{item.content.length > 20 ? item.content.substring(0,20) + " ..." : item.content}}
            </td>
            <td>
                {{if item.level == 1}}
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                {{else if item.level == 2}}
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                {{else if item.level == 3}}
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                {{else if item.level == 4}}
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                {{else if item.level == 5}}
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                <i class="layui-icon" style="color: #e20000;">&#xe600;</i>
                {{else}}
                差评
                {{/if}}
            </td>
            <td><a class="layui-icon" target="_blank" href="/Home/Detail?goodid={{item.goodId}}" style="color: #e20000;">{{item.goodName.length > 20 ? item.goodName.substring(0,12) + " ..." : item.goodName}}{{item.packName}}</a></td>
        </tr>
        <tr class="title" style="background-color:rgb(236,236,236);">
            <td colspan="4"></td>
        </tr>
        {{/each}}
    </script>
    <script type="text/javascript">

        var count = @ViewBag.CommentCount;

        layui.config({
            base: "js/"
        }).use(['layer', 'laypage'], function () {
            var layer = parent.layer === undefined ? layui.layer : parent.layer,
                laypage = layui.laypage;
            function loadOrderData(curr) {
                var index = layer.msg('评价加载中，请稍候', { icon: 16, time: false, shade: 0.8 });
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: "/User/UserComment",
                    data: { currentIndex: curr },
                    success: function (res) {

                        if (res.status == "ok") {

                            layer.close(index);

                            var html = template("comment_template", { data: res.data });

                            $(".comment_content").html(html);



                        } else {
                            layer.msg(res.errorMsg, { icon: 5 });
                        }


                    },
                    error: function () {
                        layer.msg("网络请求失败", { icon: 5 });
                    }
                });
            }

            $(function () {
                loadOrderData(1);
            });


            laypage.render({
                elem: 'page',
                count: count, //总页数
                limit:3,
                groups: 5, //连续显示分页数

                jump: function (obj, first) {
                    //得到了当前页，用于向服务端请求对应数据
                    var curr = obj.curr; // 获取当前页数下标

                    if (!first) {
                        loadOrderData(curr);
                    }
                }
            });
        });

    </script>
}